<template>
  <ul>
    <li class="nostyle"><a href="/author/">作者一览</a></li>
    <li v-for="(author, index) in list" :key="index">
      <p><component
        :style="'color:' + colorArr[index > 2 ? 3 : index]"
        :is="
          index < 3
            ? 'SmileIcon'
            : index === list.length - 1
            ? 'FrownIcon'
            : 'MehIcon'
        "
      /><router-link :to="author.path">{{ author.key }}</router-link> - 文章数： {{ author.count }} 篇（recent 7d： {{author.weeklyCount}} 篇）- 共计更新字数： {{author.wordsTotal}} 字</p>
      <p><a :href="author.lastArticlePath">{{author.lastArticle}}</a> - {{ author.lastUpdate }}</p>
    </li>
  </ul>
</template>

<script>
import { SmileIcon,MehIcon,FrownIcon  } from 'vue-feather-icons'
import card from './cards/AuthorList'
export default {
  name: "AuthorList",
  components:{
    SmileIcon,
    MehIcon,
    FrownIcon,
    card
  },
  data(){
    return {
      list: [],
      colorArr: ['rgb(218,178,115)','rgb(118,119,120)','rgb(186,110,64)','#999']
    }
  },
  mounted() {
    this.getAuthorList()
    
  },
  methods: {
    getAuthorList() {
      let authorObj = this.$author._metaMap, now = new Date().getTime();
      Object.keys(authorObj).forEach((key) => {
        let wordsTotal=0, lastWeeklyTotal=0;
        authorObj[key].pages.sort(function(a, b){return  a.updateTimeStamp - b.updateTimeStamp})
        authorObj[key].pages.forEach((article) => {
          wordsTotal +=article.readingTime.words
          lastWeeklyTotal += (now - article.createTimeStamp) < 86400000 * 7
        });

        let obj = authorObj[key].pages.pop()
        this.list.push({
          'path':authorObj[key].path,
          'key':key,
          'count':authorObj[key].pageKeys.length,
          'lastUpdate':this.$moment(obj.updateTimeStamp).fromNow(),
          'lastArticle':obj.title,
          'lastArticlePath':obj.path,
          'weeklyCount':lastWeeklyTotal,
          'wordsTotal':wordsTotal})
      });
      this.list.sort(function(a, b){return  b.count - a.count});
    },
  },
};
</script>

<style scoped lang="stylus">
ul
  li
    // display: inline-flex;
    // align-items: center;
    list-style: none;
    background rgba(0,0,0,.1) 
    padding 5px 15px
    border: dashed #eee
    border-width: 2px 2px 0
    color $darkTextColor
    &:last-child
      border-bottom: 2px dashed #eee
    &.nostyle
      background none
      border-width 0px
      padding-left: 0px
    svg
      vertical-align: middle;
      position: relative;
      top: -0.1em;
      left: 0px;
      margin-right: 10px;
</style>
